<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<style>
    .check .check-botton {
        flex-wrap: wrap;
        justify-content: space-around;
        height: auto;
    }

    .check .check-botton p {
        width: 300px;
        display: flex;
        align-items: center;
        justify-content: right;
        margin: 20px 0;
    }

    .check .check-botton #counterpart {
        width: 140px;
        margin-right: 0;
    }

    .check .check-botton p span {
        cursor: pointer;
        width: 35px;
        text-align: center;
        line-height: 30px;
        background-color: rgb(243, 243, 243);
        border: 1px solid #999;
    }

    .check .check-botton p span:hover {
        background-color: skyblue;
        color: aqua;
    }
</style>

<body>
    <div class="container">
        <div class="header">
            <div class="h-left">
                <span class="iconfont icon-yuangong"></span> 查看客户信息
            </div>
            <div class="h-right">
                <a href="./connection.html" class="btn btn-info" id="return"><span
                        class="iconfont icon-xiangzuo1"></span> 返回</a>
            </div>
        </div>
        <div class="check" style="pointer-events: none;">
            <div class="check-middle">
                <span class="iconfont icon-rili"></span> 基本信息
            </div>
            <form class="check-botton">
                <p>客户名称：<input type="text" id="name"></p>
                <p>客户标签：<select name="" id="customer_label">
                        <option>优质客户</option>
                        <option>普通客户</option>
                        <option>目标客户</option>
                        <option>无效客户</option>
                        <option>待开发客户</option>
                        <option>需关注客户</option>
                    </select></p>

                <p>企业类型：<select name="" id="type">
                        <option>国有企业</option>
                        <option>私营企业</option>
                        <option>事业单位或社会团体</option>
                        <option>中外合资</option>
                        <option>外商独资</option>
                        <option>其他</option>
                    </select>
                </p>
                <p> 对接人员：
                    <span id="counterpart" data-id=""></span><span class="iconfont icon-sousuoxiao"></span>
                </p>
                <p>客户来源：<select name="" id="source">
                        <option>主动咨询</option>
                        <option>电话营销</option>
                        <option>客户介绍</option>
                        <option>朋友介绍</option>
                        <option>独立开发</option>
                        <option>网络搜索</option>
                        <option>广告投放</option>
                        <option>展会推广</option>
                        <option>其他途径</option>
                    </select>
                </p>

                <p> 所属地区：<input name="city" id="city" type="text"></p>

                <p>客户简介：<textarea name="" id="remarks"></textarea></p>
                <p></p>
                <p></p>
            </form>
        </div>
        <div class="check" style="pointer-events: none;">
            <div class="check-middle">
                <span class="iconfont icon-rili"></span> 首要联系人
            </div>
            <form class="check-botton">
                <p>联系人姓名：<input type="text" id="staff_name"></p>
                <p>性别：<input id="staff_sex" type="text">
                </p>
                <p>部门：<input id="staff_department" type="text">
                </p>
                <p>职位：<input id="staff_post" type="text">
                </p>
                <p> 手机号码：
                    <input id="staff_phone" type="text">
                </p>
                <p> 电子邮箱：<input id="staff_e_mail" type="text">
                </p>
                <p>生日：<input id="staff_birthday" type="text">
                </p>
                <p>备注：<textarea id="staff_remarks" type="text"></textarea>
                </p>
                <p></p>
            </form>
        </div>
    </div>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../data/database.js"></script>
    <script>
        let prestoreId = JSON.parse(localStorage.getItem('prestoreId')); //预存客户id

        for (let i = 0; i < connection.length; i++) {
            const e = connection[i];
            if (e.id == prestoreId) {
                $('#name').val(e.name);
                $('#type').val(e.type);
                $('#customer_label').val(e.customer_label);
                $('#source').val(e.source);
                $('#city').val(e.city);
                $('#remarks').val(e.remarks);
                $('#counterpart').attr('data-id', e.counterpart);
                if (e.counterpart == 0 || e.counterpart == false) { $('#counterpart')[0].innerHTML = '无'; continue; }
                staff.forEach(element => {
                    if (element.id == e.counterpart) {
                        $('#staff_name').val(element.name);
                        $('#staff_sex').val(element.sex);
                        $('#staff_post').val(element.post);
                        $('#staff_department').val(element.department);
                        $('#staff_phone').val(element.phone);
                        $('#staff_e_mail').val(element.e_mail);
                        $('#staff_birthday').val(element.birthday);
                        $('#staff_remarks').val(element.remarks);
                        $('#counterpart')[0].innerHTML = element.name;
                    }
                });
            }
        }
    </script>
</body>

</html>